﻿@using Framework.HtmlHelpers
@using WebUI.Areas.Admin.Models.Clazz
@using Domain
@{
	Layout = "~/Areas/Admin/Views/Shared/_AdminContent.cshtml";

	ClazzInfo currentClazz = ViewBag.CurrentClazz;
}
@section head {
	<link href="~/dist/AdminLTE/bower_components/select2/dist/css/select2.min.css" rel="stylesheet" />
	<!-- 重新覆盖掉 select2 所覆盖的主题样式 -->
	<link rel="stylesheet" href="/dist/AdminLTE/dist/css/AdminLTE.min.css">
}
@section body {
	<script src="~/dist/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
	<script>

		String.prototype.format = function () {
			var args = arguments;
			return this.replace(/\{(\d+)\}/g, function (s, i) {
				return args[i];
			});
		};

		// start 删除
		function deleteOp(obj) {
			var $deletedTr = $(obj).parent("td").parent("tr");
			$deletedTr.remove();
		}
		// end 删除

		function loadCourseTableList(clazzId) {
			$("#js-waiting").css("display", "block");
			$("#js-table .js-data-list").remove();
			$.ajax({
				url: "/ClazzInfo/GetCourseTableList",
				type: "post",
				dataType: "json",
				data: { id: clazzId },
				success: function (data) {
					writeCourseTableList(data);
					$("#js-waiting").css("display", "none");
				}
			});
		}

		function writeCourseTableList(data) {
			var allHtml = "";
			for (var i = 0; i < data.length; i++) {
				var trHtml = '';
				trHtml += '<tr class="js-data-list" data-coursetable-id="{0}">'.format(data[i].courseTableId);

				// start 课程
				trHtml += '<td>'
				trHtml += '<select class="form-control select2" data-placeholder="选择课程" style="width: 220px">';
				for (var j = 0; j < data[i].courseSelect.length; j++) {
					var option = data[i].courseSelect[j];
					var optionHtml = '<option value="{0}" {1}>{2}</option>'.format(option.val, option.selected, option.text);
					trHtml += optionHtml;
				}
				trHtml += '</select>';
				trHtml += '</td>'
				// end 课程

				// start 教师
				trHtml += '<td>'
				trHtml += '<select class="form-control select2" data-placeholder="选择教师" style="width: 220px">';
				for (var j = 0; j < data[i].teacherSelect.length; j++) {
					var option = data[i].teacherSelect[j];
					var optionHtml = '<option value="{0}" {1}>{2}</option>'.format(option.val, option.selected, option.text);
					trHtml += optionHtml;
				}
				trHtml += '</select>';
				trHtml += '</td>'
				// end 教师

				// start 删除
				trHtml += '<td>'
				trHtml += '<button class="btn btn-danger" onclick="deleteOp(this)">删除</button>'
				trHtml += '</td>'
				// end 删除

				trHtml += '</tr>'

				allHtml += trHtml;
			}

			$("#js-table").append(allHtml);
			//Initialize Select2 Elements
			$(".select2").select2();
		}

		function saveCourseTableList(clazzId) {
			$("#js-btn-save").html("保存中").attr("disabled", "disabled");
			var listJson = [];
			var $trList = $("#js-table tr.js-data-list");
			for (var i = 0; i < $trList.length; i++) {
				$optionList = $trList.eq(i).find("select option:selected");
				var trJson = {
					courseTableId: parseInt($trList.eq(i).data("coursetable-id")),
					courseId: parseInt($optionList.eq(0).val()),
					teacherId: parseInt($optionList.eq(1).val())
				};
				listJson.push(trJson);
			}
			console.log(listJson);
			$.ajax({
				url: "/ClazzInfo/SaveCourseTableList",
				type: "post",
				dataType: "json",
				data: { clazzId: clazzId, listJson: listJson },
				success: function (data) {
					$("#js-btn-save").html("保存").removeAttr("disabled");
					$("#js-message").fadeIn();
					if (data.code <= 0) {
						$("#js-message").attr("class", "alert alert-danger").find(".message").html(data.message)
					} else {
						$("#js-message").attr("class", "alert alert-success").find(".message").html(data.message);
					}
					// 3s 后隐藏
					setTimeout(function () {
						$("#js-message").fadeOut("slow");
					}, 3000);
				}
			});
		}

		function loadAllCourseAndTeacherJson() {
			$.ajax({
				url: "/ClazzInfo/GetAllCourseJson",
				type: "post",
				dataType: "json",
				async: false,
				success: function (data) {
					$("#js-all-course-json").html(JSON.stringify(data));
				}
			});
			$.ajax({
				url: "/ClazzInfo/GetAllTeacherJson",
				type: "post",
				dataType: "json",
				async: false,
				success: function (data) {
					$("#js-all-teacher-json").html(JSON.stringify(data));
				}
			});
		}

		function addCourseTable() {
			if ($("#js-all-course-json").html().trim() == '' || $("#js-all-teacher-json").html().trim() == '') {
				loadAllCourseAndTeacherJson();
			}

			var allCourseJson = JSON.parse($("#js-all-course-json").html());
			var allTeacherJson = JSON.parse($("#js-all-teacher-json").html());
			var trHtml = '';
			trHtml += '<tr class="js-data-list" data-coursetable-id="0">';

			trHtml += '<td>';
			trHtml += '<select class="form-control select2" data-placeholder="选择课程" style="width: 220px">';
			for (var i = 0; i < allCourseJson.length; i++) {
				trHtml += '<option value="{0}">{1}</option>'.format(allCourseJson[i].val, allCourseJson[i].text);
			}
			trHtml += '</select>'
			trHtml += '</td>';

			trHtml += '<td>';
			trHtml += '<select class="form-control select2" data-placeholder="选择教师" style="width: 220px">';
			for (var i = 0; i < allTeacherJson.length; i++) {
				trHtml += '<option value="{0}">{1}</option>'.format(allTeacherJson[i].val, allTeacherJson[i].text);
			}
			trHtml += '</select>'
			trHtml += '</td>';

			trHtml += '<td>'
			trHtml += '<button class="btn btn-danger" onclick="deleteOp(this)">删除</button>'
			trHtml += '</td>'

			trHtml += '</tr>'
			$("#js-table").append(trHtml);

			//Initialize Select2 Elements
			$(".select2").select2();
		}

		function cancel() {
			loadCourseTableList(@currentClazz.ID);
		}

		$(function () {
			var clazzId = @currentClazz.ID;
			// 初始化该班级已有课表
			loadCourseTableList(clazzId);
		});


	</script>
}

<!-- start 提示框 -->
@{ Html.RenderPartial("_MessagePartial"); }
<!-- end 提示框 -->
<!-- start .box -->
<div class="box">
	<!-- start .box-header -->
	<div class="box-header">
		<h3 class="box-title">@currentClazz.ClazzCode 班 - 调课</h3>

		<div class="box-tools">
			<div class="input-group input-group-sm" style="width: 150px;">
				<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

				<div class="input-group-btn">
					<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
				</div>
			</div>
		</div>
	</div>
	<!-- end .box-header -->
	<!-- start .box-body -->
	<!-- start 简单表格 -->
	<div class="box-body table-responsive no-padding">
		<div id="js-all-course-json" style="display: none;"></div>
		<div id="js-all-teacher-json" style="display: none;"></div>
		<table id="js-table" class="table table-hover">
			<tr>
				<th>课程</th>
				<th>教师</th>
				<th>删除</th>
			</tr>
			<tr id="js-waiting">
				<td>载入中，请稍等...
				<td>
			<tr>
		</table>
	</div>
	<!-- end 简单表格 -->
	<!-- end .box-body -->
	<!-- start .box-footer -->
	<div class="box-footer clearfix">
		<div class="btn-group pull-left">
			@if (TempData["RedirectUrl"] != null)
			{
				<a class="btn btn-default" href="@TempData["RedirectUrl"].ToString()">返回</a>
			}
			else
			{
				<a class="btn btn-default" href="javascript:history.go(-1);">返回</a>
			}
			<button class="btn btn-default" onclick="cancel()">取消</button>
			<button class="btn btn-success" onclick="addCourseTable()">添加</button>
			<button id="js-btn-save" class="btn btn-primary" onclick="saveCourseTableList(@currentClazz.ID, this)">保存</button>
		</div>
	</div>
	<!-- end .box-footer -->
</div>
<!-- end .box -->
